More Related Content
More from Joseph Chiang (20)
Professional Web Development
- 3. Links
• http://developer.yahoo.com/r3/
• http://devzone.zend.com/article/2585-Using-YAML-With-PHP-
and-PECL
• http://farm4.static.flickr.com/
3251/3017901989_17f1bc4a5e_b.jpg
• http://www.sun-line.idv.tw/blog/index.php?load=read&id=521
• http://profiles.yahoo.com/josephj6802
• http://apps.yahoo.com/-MMT5Q550/YahooFullView/index.php
• http://www.slideshare.net/josephj/slideshows
- 23. <div id=”nav”>
<div class=”hd”>
<h2> </h2>
</div>
ID <div class=”bd”> .hd, .bd, .ft
<p> </p> header body footer
</div>
<div class=”ft”>
<a href=”...”> ... </a>
</div>
</div>
- 25. ykpsb
• ykp + prefix
• sb search box
• inc/search_box.php
- 26. id CSS namespace
form .extra
[HTML] [CSS]
<style>
<div id=”ykpsb”>
#ykpsb {
<div class=”bd clearfix”>
margin-bottom:10px;
<form ...>
}
...
#ykpsb form {
</form>
float:left;
<div class=”extra”>
}
...
#ykpsb .extra {
</div>
float:right;
</div>
}
</div>
</style>
- 27. 1 HTML 3 Mins
http://josephj.com/training/ncu/html-module.html
1. id
2. hd, bd, ft class
3. CSS
font:bold 16px;
background:#ffe;
color:#369;
- 30. CSS float
<div id=”masthead” style=”border:solid 1px #000”>
<span style=”float:left”>
</span>
<span style=”float:right”>
</span>
</div>
- 32. IE
zoom:1
<div id=”masthead” style=”zoom:1;border:solid 1px #000”>
<span style=”float:left”>
</span>
<span style=”float:right”>
</span>
</div>
- 33. <div id=”masthead” style=”zoom:1;border:solid 1px #000”>
<span style=”float:left”>
</span>
<span style=”float:right”>
</span>
</div>
<style>
/* clear:both */
#masthead:after {
content:’’;
display:block;
clear:both;
}
</style>
- 34. 2 CSS 3 Mins
http://josephj.com/training/ncu/float.html
1.
2. YUI
3. border
4. float
border:solid 5px #ccc;
font:bold 197%;
- 38. background:[ ]
[url( )]
[x, y ]
[ ];
background:#369 url(ico_yui.gif) left top repeat-x;
0 100% repeat-y
0 -12px no-repeat
background-color:#369;
background-image:url(ico_yui.gif);
background-position:left top;
background-repeat:repeat-x;
- 39. 3 CSS 3 Mins
http://josephj.com/training/ncu/background.html
1.
http://josephj.com/training/ncu/bg_nav.png
- 41. • position
• position:static;
• position:absolute;
• position:relative;
• position:fixed;
• top, right, bottom, left
• 5px
position:relative; top:5px;
•
position:absolute; right:0; left:0;
• IE6
position:fixed;bottom:0;
- 45. 4 CSS
http://josephj.com/training/ncu/position.html
1. li position:relative;
2. img position:absolute;
top, right
- 47. IE 6,7
•
• background:blue;
• IE 6 7 * CSS Rule
• *background:red;
• IE 6 _ CSS Rule
IE 7
• _background:green;
- 48. #article .bd {
background:blue; FF, IE 6, IE 7, Safari...
*background:green; IE 6, IE 7
_background:red; IE 6
}
IE 6, IE7, Firefox
- 49. 5 CSS Hack
http://josephj.com/training/ncu/css-hack.html
1. #article .bd FF pink,
IE7 green, IE6 red
- 51. 18px
18px background:100% 0;
background:100% -18px;
72px
background:0 -36px;
background:0 -54px;
CSS Sprites
http://www.lesliesommer.com/wdw07/html/images/cr_big.gif
- 53. • http://josephj.com/training/ncu/round-corner.html
• http://josephj.com/training/ncu/round-corner-sample.html
• http://josephj.com/training/ncu/round-corner-sample-2.html
• http://josephj.com/training/ncu/round-corner-sample-3.html
- 55. 7 YUI
http://josephj.com/training/ncu/yui-menu.html
1. new
YAHOO.widget.MenuBar([ id]);
YUI
2. render()
- 56. 7 YUI
http://josephj.com/training/ncu/yui-menu.html
(true false)
autosubmenudisplay
hidedelay
n
(true false)
lazyload
- 59. 8 YUI
http://josephj.com/training/ncu/yui-button.html
1. new YAHOO.widget.Button([
id]);
- 61. YUI Container
YAHOO.widget.Dialog
YAHOO.widget.Panel
YAHOO.widget.Panel
YAHOO.widget.SimpleDialog
- 62. 9 YUI
http://josephj.com/training/ncu/yui-panel.html
1. var oPanel = new YAHOO.widget.Panel([ id], [ ]);
#panel
2. oPanel.render(document.body) append
3. oButton.addListener(‘click’, onButtonClick)
onButtonClick oPanel.show();
- 63. 9 YUI
http://josephj.com/training/ncu/yui-panel.html
close
fixedcenter
modal
underlay shadow’, ‘matte’
visible
width
{ 1: 1, 2: 2}